<template>
  <div class="user-menu">
    <div class="item" v-for="(item,index) in routers" :key="index"> 
      <div class="item-lable">{{item.text}}</div>
      <template v-for="(childrenItem,childrenIndex) in item.children">
        
        <el-badge :value="childrenItem.count" :key="childrenIndex" :hidden='childrenItem.count | menuContHidden'>
          <div class="item-btns" @click="goRouter(childrenItem.path)">
            <div class="btns-icon" :style="childrenItem.icon">
              
            </div>
            <span class="btns-lable">{{childrenItem.text}}</span>
          </div>
        </el-badge>
      </template>
    </div>
  </div>
</template>

<script>
import { getMyInfo } from "~/api/user"
export default {
  data () {
    return {
      routers: [
        {
          text: '消息管理',
          icon: '',
          children: [
            {
              text: '站内公告',
              icon: 'background-position:-98px -183px;',
              count: null,
              path: '/user/news/notice'
            },
            {
              text: '案件交流',
              icon: 'background-position:-174px -183px;',
              count: null,
              path: '/user/news/caseExchange'
            },
          ]
        },
        {
          text: '订单管理',
          icon: '',
          children: [
            {
              text: '我的申请',
              icon: 'background-position:-225px -232px;',
              count: null,
              path: '/user/myApply/patent'
            },
            {
              text: '文件下载',
              icon: 'background-position:-279px -231px;',
              count: null,
              path: '/user/myFiles/fileDownload'
            },
          ]
        },
        {
          text: '缴费管理',
          icon: '',
          children: [
            {
              text: '缴费开票',
              icon: 'background-position:-173px -274px;',
              count: null,
              path: '/user/myPay/payInquiry'
            },
            {
              text: '我的钱包',
              icon: 'background-position:-278px -274px;',
              count: null,
              path: '/user/myPurse'
            },
          ]
        },
        {
          text: '成就管理',
          icon: '',
          children: [
            {
              text: '我的成就',
              icon: 'background-position:-101px -319px;',
              count: null,
              path: ''
            },
            {
              text: '我的排行',
              icon: 'background-position:-173px -319px;',
              count: null,
              path: '/user/rank'
            },
          ]
        },
      ],
      myInfo: {}
    }
  },
  watch: {
    myInfo: {
      handler: function (val) {
        if (val) {
            // console.log(val)
          for(let i = 0; i < this.routers.length; i++) {
            if (this.routers[i].text == '消息管理') {
              this.routers[i].children[0].count = val.noRead
              this.routers[i].children[1].count = val.prNoRead
            }
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  
  created () {
    this.getMyinfo()
    // 用户信息
    // console.log(this.$store.state.user)
  },
  methods: {
    async getMyinfo (params) {
      let myInfo = await getMyInfo(this.$axios, params);
      if (myInfo.data.status == 'success') {
        this.$store.commit("setRoleInfo",myInfo.data.data)
        this.$store.commit("setUser",myInfo.data.data)
        this.myInfo = myInfo.data.data
      }
    },
    goRouter (path) {
      if (path == '') {
        this.$alert('该功能暂未开通！', '提示', {
          confirmButtonText: '确定',
          center: true,
          callback: action => {
          }
        })
      } else {
        this.$router.push(path)
      }
      // console.log(path)
      // this.$router.push(path)
    }
  }
}
</script>

<style lang="less" scoped>
  .user-menu {
    .item {
      width: 100%;
      height: 150px;
      margin-bottom: 20px;
      padding: 30px 0 32px 41px;
      background: #ffffff;
      &-lable {
        font-size: 18px;
        color: #bebebe;
        margin-bottom: 22px;
        font-family:Source Han Sans CN;
      }
      &-btns {
        display: inline-block;
        width: 175px;
        height: 50px;
        border: 2px #a3c1ff solid;
        border-radius: 10px;
        margin-left: 90px;
        line-height: 1;
        padding: 14px 29px 14px 29px;
        box-sizing: border-box;
        text-align: center;
        font-size: 18px;


        .btns-icon {
          width: 20px;
          height: 21px;
          display: inline-block;
          vertical-align: top;
          background:url('../../../assets/img/图标.png') no-repeat;
        }
        .btns-lable {
          display: inline-block;
          vertical-align: top;
          color: #707070;
          font-family:Source Han Sans CN;
        }

      }
      .el-badge:nth-child(2) {
        .item-btns {
          margin-left: 0px;
        }
      }
      
      &-btns:hover {
        background: #eff8ff;
      }
    }
    .item:last-child {
      margin-bottom: 0;
    }
  }
</style>>
